<template>
  <a-modal
    :title="title"
    width="80%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row :gutter="24">
          <a-col :md="12" :sm="8" v-for="(param,index) in  paramList">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :label="param.fieldItemRemark"
              :prop="param.fieldItemName">
              <!--文本输入形式-->
              <a-input v-if="param.valueType == '1'" :triggerChange="true"
                       v-model="model[param.fieldItemName]"

              />
              <!--下拉框输入形式-->
              <j-dict-select-tag v-if="param.valueType == '2'" :triggerChange="true"
                                 v-model="model[param.fieldItemName]"
                                 :dictCode="param.dictType"></j-dict-select-tag>
              <!--单选输入形式-->
              <j-dict-select-tag v-if="param.valueType == '3'" type="radio" :triggerChange="true"
                                 v-model="model[param.fieldItemName]"
                                 :dictCode="param.dictType"></j-dict-select-tag>
              <!--多选输入形式-->
              <j-multi-select-tag v-if="param.valueType == '4'" :triggerChange="true"
                                  v-model="model[param.fieldItemName]"
                                  :dictCode="param.dictType"></j-multi-select-tag>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import {getAction, putAction} from "../../../api/manage";
import {initDictOptions} from '@/components/dict/JDictSelectUtil'
import JMultiSelectTag from "../../../components/dict/JMultiSelectTag";

export default {
  name: 'FieldConfig',
  components: {JMultiSelectTag},
  data() {
    return {
      value: 1,
      title: '操作',
      visible: false,
      model: {},
      tableId:'',
      fieldName:'',
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      paramList: [],
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        edit: 'generator/table/columnSave',
        paramListUrl: 'generator/table/column/queryById',
        queryById: 'generator/column/queryById'
      }
    }
  },
  created() {
    this.initialDict();
  },
  methods: {
    async initialDict() {
      await initDictOptions('validate_rule').then((res) => {
        if (res.success) {
          this.validateRuleList = res.result;
        }
      });
      await getAction(this.url.dictCodeList).then((res) => {
        if (res.result) {
          this.dictCodeList = [];
          res.result.forEach(item => {
            this.dictCodeList.push({
              label: item.text,
              value: item.value
            })
          });
        }
      });
    },
    add() {
      this.edit({})
    },
    async edit(tableId, fieldName) {
      this.visible = true
      this.tableId = tableId;
      this.fieldName = fieldName;
      this.validatorRules = {};
      let {success, result, message} = await this.getFormItemList(tableId, fieldName);
      if (success) {
        this.paramList = result;
        let formItems = {};
        this.paramList.forEach(item => {
          formItems[item.fieldItemName] = item.fieldItemValue;
          this.validatorRules[item.fieldItemName] = [{ required: item.required == '1'?true:false, message: item.fieldItemRemark+'必填!' }]
        });
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.model = Object.assign({}, formItems);
        })
      }
    },
    async getFormItemList(tableId, fieldName) {
      return await getAction(this.url.paramListUrl, {tableId: tableId, fieldName: fieldName});
    },
    // 确定
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let formData = Object.assign({tableId:that.tableId,fieldName:this.fieldName },this.model);
         // if (formData.validateRules != null && formData.validateRules.length > 0) {
         //   formData.validateRules = formData.validateRules.join(",");
         // } else {
        //    formData.validateRules = "";
        //  }
          putAction(this.url.edit, formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
              that.close();
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    // 关闭
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
    }
  }
}
</script>